<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../css/mui.css">
		<link rel="stylesheet" href="../fonts/iconfont.css" />
		<style>
			body{
				background:transparent;
				color: #323232
			}
			.mui-content{
				width: 80%;
			}
			.title{
			  	margin: 35px 15px 10px;
			  }
			  
			.backpic{
				position: relative;
				height: 200px;
				background:url(../images/background.png) no-repeat;  
				background-size: 100% auto;
				background-position:center -180px;
				animation:headerbackground 5s linear 1s infinite alternate none running;
				animation-direction:alternate;
			}
			@keyframes headerbackground
			{
			0%   {background-position:center -180px;}
			100% {background-position:center -70px;}
			}
			.backpic .content{
				padding-top: 100px;
			}
			.mui-bar{
				background-color: #FFFFFF;
				margin-left: 0.3em;
				margin-left: 1em;
			}

			.nav_menu{
				display: inline-block;
				overflow: hidden;
				text-align: center;
				padding: 1em 1.5em 0.3em 0em;
			}
			.mui-bar-tab:first{
				right: 2em;
			}
			
			.nav_menu span:last-child{
				display: block;
				font-size: 0.7em;
			}
			.nav_menu span:first-child{
				font-size: 1.3em;
			}
			.mui-table-view{
				padding-top: 1em;
			}
			.mui-table-view-cell{
				font-size: 1.1em;
			}
			.mui-table-view-cell>.iconfont{
				font-size: 1.1em;
				padding-right: 0.5em;
			}
			#erweima span{
				padding-top: 1.2em;
				padding-right: 0.5em;
				font-size: 1.7em;
				color: #FFFFFF;
			}
			#showpic{
				position: absolute;
				top: 5em;
				left: 1em;
				color: #FFFFFF;
			}
			#showpic img{
				width: 3em;
				border-radius: 1.5em;
				vertical-align: middle;
			}
			#showpic h2{
				display: inline-block;
				top: 0.3em;
				position: relative;
				left: 0.5em;
			}
			.heard2 span{
				color: #FFFF00;
			}
			.mui-content{
				background: #FFFFFF;
				position: absolute;
				height: 100%;
			}
			.fullmsk{
				background: rgba(05,05,05,0.3);
			}
			.bottonmenu{
				display: block;
				position: absolute;
				bottom: 0px;
				left: 1.5em;
			}
		</style>
	</head>

	<body>
		<div class="mui-fullscreen"></div>
		<div class="mui-content">
			<div class="backpic">
				<div id='erweima'><span class="iconfont icon-erweima mui-pull-right"></span></div>
				<div id="showpic">
					<div><img id="touxiang" src="../images/touxiang.jpg" onerror="../images/touxiang.jpg"/><h2 id="username">蓝羽</h2></div>
					<div class="heard2">
						<span class="iconfont icon-xingguangzhi"></span>
						<span class="iconfont icon-xingguangzhi"></span>
						<span class="iconfont icon-xingguangzhi"></span>
					</div>
					<span>大梦一场，仍是少年</span>
				</div>
			</div>
			<ul class="mui-table-view mui-table-view-icon">
				<li class="mui-table-view-cell"><span class="iconfont icon-ziyuan"></span>钱包 </li>
				<li class="mui-table-view-cell"><span class="iconfont icon-color"></span>装扮 </li>
				<li class="mui-table-view-cell"><span class="iconfont icon-guanzhu"></span>收藏</li>
				<li class="mui-table-view-cell"><span class="iconfont icon-tupian"></span>相册</li>
				<li class="mui-table-view-cell" onclick="openTestWin();"><span class="iconfont icon-wenjian"></span>文件 </li>
			</ul>
			<div class="bottonmenu">
				<div class="nav_menu" id="opsetupFun">
					<span class="iconfont icon-shezhi"></span>
					<span>设置</span>
				</div>
				<div class="nav_menu">
					<span class="iconfont icon-moonbyueliang"></span>
					<span>夜间</span>
				</div>
				<div class="nav_menu">
					<span>6℃</span>
					<span>上海</span>
				</div>
			</div>
		</div>
		
		<script src="../js/mui.min.js"></script>
		<script src="../js/jquery-3.2.1.min.js"></script>
		<script src="../js/myapp.js"></script>
		<script type="text/javascript" charset="utf-8">
			//关闭back、menu按键监听，这样侧滑主界面会自动获得back和memu的按键事件，仅在主界面处理按键逻辑即可；
			mui.init({
				keyEventBind: {
					backbutton: false,
					menubutton: false
				}
			});
			var self = null;
			mui.plusReady(function() {
				self = plus.webview.currentWebview();
				curuserinfo =   getSettings();
				document.getElementById("username").innerHTML=curuserinfo.userName;
				document.getElementById("touxiang").setAttribute("src",baseutl+curuserinfo.picSm);
			});
			window.addEventListener('dragleft', function(e) {
				e.detail.gesture.preventDefault();
			});

			function closeMenu() {
				$("body>div:first").removeClass("fullmsk");
				self.hide('slide-out-left',200);
			}

			//左滑显示出来的菜单，只需监听右滑，然后将菜单关闭即可；在该菜单上左滑，不做任何操作；
			window.addEventListener("swipeleft", closeMenu);
			$(document).on('click','.mui-fullscreen',function(){
				closeMenu();
			});
			
			mui(".bottonmenu").on('tap','#opsetupFun',function(){
				mui.openWindow({
					url:"setup/setting.html",
					id:"setting.html"
				})
			});
			
			
			function openTestWin(){
				var testhtml = plus.webview.getWebviewById("test.html");
				if(testhtml==null){
					testhtml = plus.webview.create(
					"testpage/dongtaiheard.html",
					"test.html",
					{
						zindex: 2
					});
				}
				testhtml.show();
			}
			
		</script>
	</body>

</html>
